<template>
  <div id="productDetail">
    <div @click="back"><i class="el-icon-arrow-left"></i>返回</div>
    <div>产品名称：{{ name }}</div>
    <div>产品价格：{{ price }}</div>
    <div>产品描述：{{ description }}</div>
    <div>产品主图:</div>
  </div>
</template>
<script>
export default {
  created() {
    //获取传输的数据
    console.log("route", this.$route.query.id);
    this.id = this.$route.query.id;
  },
  mounted() {
    var id = this.id;
    this.$axios.get("/product/findById", { params: { id } }).then((res) => {
      this.name = res.data.data.name;
      this.description = res.data.data.description;
      this.price = res.data.data.price;
    });
  },
  data() {
    return {
      id: 1,
      name: "",
      description: "",
      price: "",
    };
  },
  methods: {
    back() {
      this.$router.back();
    },
  },
};
</script>
<style lang="less">
#productDetail {
  & > div {
    margin: 20px;
  }
  & > div:first-child {
    color: skyblue;
    font-size: 14px;
    &:hover {
      cursor: pointer;
    }
  }
}
</style>